<template>

   <div style="margin-top: 20px;margin-left: 10px">
     <el-breadcrumb separator="/">
       <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
       <el-breadcrumb-item><b>航班信息管理</b></el-breadcrumb-item>
       <el-breadcrumb-item>离港信息管理</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
  <div class="bg" style="margin-top: 70px">
   <div class="query_div">
     <el-row>
       <el-col :span="4" class="query_btn">出发</el-col>
       <el-col :span="15" class="query_input">
         <el-form :ref="searchFormRef" :model="searchFormModel">
         <el-input
           v-model="searchFormModel.FLID"
           style="width: 430px; height:50px;margin-top: 15px;font-size: 18px"
           placeholder="航班号"
           clearable
       />
         </el-form>
       </el-col>
       <el-col :span="5" >
         <el-button :icon="Search" round @click="getDEPE"
                   style="background-color: gold;
                          color: white;
                          font-weight: bold;
                          height: 45px;
                          width: 110px;
                          margin-top: 17px;
                          font-size: large">搜索</el-button>
       </el-col>
     </el-row>
   </div>
   <div class="table">
     <el-table :header-cell-style="{ background: 'cornflowerblue', color: 'white', fontSize: '18px', textAlign: 'center',height:'50px' }"
              :data="tableData" border
               style="width:1040px;
               margin-left: 10%;
               margin-top: 30px;
               height: auto;
               ">
       <el-table-column prop="flid" label="航班号" width="150" height="50px"/>
       <el-table-column prop="fatt" label="航班属性" width="150" >
         <template #default="scope">
           <span v-if="scope.row.fatt==2403">国内</span>
           <span v-if="scope.row.fatt==2402">地区</span>
           <span v-if="scope.row.fatt==2401">国际</span>
           <span v-if="scope.row.fatt==2404">混合</span>
         </template>
       </el-table-column>
       <el-table-column prop="ffid" label="航班标识" width="220" />
       <el-table-column prop="FRTT" label="起飞时间" width="220" />
       <el-table-column prop="place" label="出发地" width="150" />
       <el-table-column prop="ista" label="航班状态" width="150" >
         <template #default="scope2">
            <span v-if="scope2.row.ista=='DEP'">
              <el-button type="success" style="width: 90px" round>已起飞
              </el-button></span>
         </template>
       </el-table-column>
       <el-pagination background layout="prev, pager, next" :total="1000" />
     </el-table>
     <!-- 分页按钮 -->
       <el-pagination background
                      size="large"
                      style="margin-top: 30px;margin-left: 15%;"
           v-model:current-page="currentPage4"
           v-model:page-size="pageSize4"
           :page-sizes="[5, 10 ]"
           :size="size"
           :disabled="disabled"
           :background="background"
           layout="total, sizes, prev, pager, next, jumper"
           :total=pageFormModel.total
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       />
   </div>
 </div>
</template>

<script setup>
import {onMounted,reactive, ref} from "vue";
import {Search}from '@element-plus/icons-vue'
import request from "@/utils/request";
// 从SessionStorage取出数据
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

onMounted(()=>{
  DEPEData()
  getAllDEPE()
})
const tableData=ref([
  {
    fatt:''
  }
])
const getAllDEPE=()=>{
  request({
    url:'/query/querydepe/getAllDEPE',
    method:'get'
  }).then(res=>{
    if (200==res.data.errorCode){
      tableData.value=res.data.data
    }
  })
}

const DEPEData=()=>{
  request({
    url:'/query/querydepe/DEPEpage',
    method:'get',
    params:searchFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    tableData.value=res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages
  })
}
//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  current : '',
  pages : ''
})
//分页--------------------------------------------------
const currentPage4 = ref()
const pageSize4 = ref()
// const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  requestPage()
}
const handleCurrentChange = (val) => {
  pageSubFormModel.current=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  requestPage()
}
const requestPage=()=>{
  request({
    url:'/query/querydepe/DEPEpage',
    method:'get',
    params:pageSubFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    tableData.value=res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages
  })
}
//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})


const searchFormRef = ref()
const searchFormModel = reactive({
  FLID : ''
})
const getDEPE=()=>{
  if (searchFormModel.FLID.length==0){
    getAllDEPE()
  }else {
  request({
    url:'/query/querydepe/querydepebyflid',
    method:'get',
    params:searchFormModel,
    headers:{
      'token': token
    }
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data
    }
  })
  }
}
</script>


<style scoped>
.bg{
  height: 850px;
}
.query_div{
  margin-left: 20%;
  margin-top: 50px;
  height: 80px;
  width: 800px;
  background-color: cornflowerblue;
}
.query_btn{
  font-size: larger;
  height: 18px;
  margin-top: 25px;
  color: gold;
}
.query_input{
  background-color: #f2f2f2;
  height: 80px;
  opacity: 0.75;
}
.table{
  height: 600px;
}
/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  height: 54px;
  font-size: large;
  text-align: center;
}

</style>